<template>
  <div class="tabs" v-show="isShow">
    <ul>
      <router-link
        :class="{'router-link-active': activeTab == item.cls}"
        v-for="item in navItems"
        :key="item.cls"
        :to="{name: item.cls}"
        tag="li"
        @click.native="logOut(item)"
        exact
      >
        <div>
          <img
            v-if="activeTab == item.cls"
            style="width: 20px; height: 20px;"
            :src="item.activeIcon"
          >
          <img v-else style="width: 20px; height: 20px;" :src="item.icon">
        </div>
        <div>{{item.name}}</div>
      </router-link>
    </ul>
  </div>
</template>
<script>
import homeIcon from "../../assets/nav/trade.png";
import homeIconA from "../../assets/nav/tradeActive.png";
import shouyeIcon from  "../../assets/nav/homeActive.png";
import shouyeIconA from  "../../assets/nav/home.png";
import mineIcon from "../../assets/nav/price.png";
import mineIconA from "../../assets/nav/capitalActive.png";
import extendIcon from "../../assets/nav/capital.png";
import extendIconA from "../../assets/nav/priceActive.png"
export default {
  data() {
    return {
      isShow: true,
      activeTab: "home",
      navItems: [
        {
          cls: "home",
          // name: "首页",
          push: "/home",
          icon: shouyeIconA,
          activeIcon: shouyeIcon
        },
        {
          cls: "notice",
          // name: "行情",
          push: "/notice",
          icon: extendIcon,
          activeIcon: extendIconA
        },
        {
          cls: "trade",
          // name: "交易",
          push: "/trade",
          icon: homeIcon,
          activeIcon: homeIconA
        },
        {
          cls: "mine",
          // name: "资产",
          push: "/mine",
          icon: mineIcon,
          activeIcon: mineIconA
        }
      ]
    };
  },
  methods: {
      logOut(obj) {
      this.activeTab = obj.cls;
    },
    //添加数据
    addData(){
       console.log('aaa')
       if(localStorage.lang == 'cn'){
          //  如果是中文需要往数组navItems里把中文数据推进去
            let nameArr = ['首页','行情','交易','资产']
            for(let i in this.navItems){
                this.navItems[i].name = nameArr[i]
                console.log(this.navItems)
            }
       }else{
        //  如果是英文就把英文数据推进去
        let nameEnArr = ['index','quros','transition','assets']
            for(let i in this.navItems){
               this.navItems[i].name = nameEnArr[i]
                console.log(this.navItems)
            }
       }
    },
  },created() {
        let that = this;
        that.selectValue = localStorage.lang == undefined?'cn':localStorage.lang  
         console.log(localStorage.lang)    
        that.addData()
    },
  mounted() {
    var address = window.location.href;
    if (address.indexOf("/trade") != -1) {
      this.activeTab = "trade";
    } else if (address.indexOf("/mine") != -1) {
      this.activeTab = "mine";
    } else if (address.indexOf("/notice") != -1) {
      this.activeTab = "notice";
    }
  }
};
</script>
<style lang="stylus" type="text/scss">
.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
  box-shadow: 0 2px 4px #000;
  width: 100%;
  height: 1rem;
  font-size: 0.25rem;
  color: #999999;
  z-index: 999;

  & > ul, & > ul > li {
    margin: 0;
    padding: 0;
  }

  ul {
    display: table;
    width: 100%;
    display: flex;

    & > li {
      flex: 1;
      text-align: center;
      text-align: center;
      display: table-cell;
      padding: 0.1rem;
      cursor: pointer;

      > div {
        text-align: center;
      }

      &.router-link-active {
        color: #be9047 !important;
      }
    }
  }
}
</style>